<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 事件队列、事件循环
    /* 
    宏任务是由宿主发起的(浏览器或noede)  进程的切换就是一个宏任务  需要花费大量的资源
    微任务是由js引擎发起的  线程的切换就是一个微任务

    */
    // 全局上下文 执行栈中
    /* 
      执行任何一个宏任务之前，一定要保证微任务队列是清空的
    */

    // 定时器  宏任务 macrotask
    setTimeout(() => {
      console.log('setTimeout0');
    }, 0)
    setTimeout(() => {
      console.log('setTimeout2');
    }, 0)

    //  Promise中的then回调也会被加入到队列里边
    console.log("1111");
    new Promise((resolve, reject) => {
      console.log("2222");
      console.log("-----1");
      console.log("-----2");
      resolve()
      console.log("-----3");
    }).then(res => { //微任务 micratask
      console.log("then传入的回调:res", res);
    })
    console.log("3333");
  </script>
</body>

</html>